﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jQuery EasyUI Extensions - Dialog</title>

    <link href="../../../../jquery-easyui-themes/default/easyui.css" rel="stylesheet" type="text/css" />
    <link href="../../../../jquery-easyui-themes/icon.css" rel="stylesheet" type="text/css" />

    <script src="../../../../jquery/jquery-1.11.2.js" type="text/javascript"></script>
    <script src="../../../../jquery-easyui-1.4.3/jquery.easyui.min.js" type="text/javascript"></script>
    <script src="../../../../jquery-easyui-1.4.3/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>

    <script src="../../../../jquery-extensions/jquery.jdirk.js" type="text/javascript"></script>
    <link href="../../../../jeasyui-extensions/jeasyui.extensions.css" rel="stylesheet" />

    <script src="../../../../jeasyui-extensions/jeasyui.extensions.js"></script>
    <script src="../../../../jeasyui-extensions/jeasyui.extensions.menu.js"></script>
    <script src="../../../../jeasyui-extensions/jeasyui.extensions.panel.js"></script>
    <script src="../../../../jeasyui-extensions/jeasyui.extensions.window.js"></script>
    <script src="../../../../jeasyui-extensions/jeasyui.extensions.dialog.js"></script>

    <script type="text/javascript">
        $(function () {

            var opts = {
                title: "快速创建的 Dialog",
                width: "auto", height: "auto",
                //top: 130, left: 170,
                minWidth: 150, minHeight: 100,
                maxWidth: 1200, maxHeight: 500,
                content: "这是通过 $.easyui.showDialog 方法创建的 Dialog",
                topMost: false,
                toolbar: [
                    { text: "save", plain: false, handler: function (dia, btn) { $.data(dia, "dialog").save(); } },
                    { text: "close", plain: false, handler: function (dia, btn) { $.data(dia, "dialog").close(); } },
                    { text: "apply", plain: false, handler: function (dia, btn) { $.data(dia, "dialog").apply(); } }
                ]
            };

            $("#btn1").click(function () {
                $.easyui.showDialog(opts);
            });

            $("#btn2").click(function () {
                var t = $.easyui.showDialog($.extend({}, opts, {
                    width: 600, height: 480, iniframe: true,
                    modal: false, topMost: true,
                    href: "jEasyUIExtensions-SubPage.html",
                    tools: [
                        { iconCls: "icon-reload", handler: function () { t.dialog("refresh"); } },
                    ]
                }));
            });

            $("#btn3").click(function () {
                var t = $.easyui.showDialog($.extend({}, opts, {
                    width: 600, height: 480, iniframe: false,
                    modal: false, topMost: true,
                    href: "jEasyUIExtensions-SubPage-Href.html",
                    tools: [
                        { iconCls: "icon-reload", handler: function () { t.dialog("refresh"); } },
                    ]
                }));
            });



            $("#btn11").click(function () {
                $.easyui.showOption(opts);
            });

        });
    </script>
</head>
<body class="easyui-layout" data-options="fit: true">
    <div data-options="region: 'south', title: 'south', split: true, collapsed: true" style="height: 100px;"></div>
    <div data-options="region: 'west', title: 'west', split: true" style="width: 200px;"></div>

    <div data-options="region: 'center', title: 'center', split: true" style="padding: 20px;">

        <div style="width: 600px; height: 400px; border: 1px solid black;">
            <div id="p1" class="easyui-window" data-options="inline: true, inlocale: true, modal: true, width: 300, height: 200"></div>
        </div>
        <hr />

        <label for="userCode">文本输入框：</label><input id="userCode" type="text" />

        <hr />
        <a id="btn1" class="easyui-linkbutton">showDialog</a>
        <a id="btn2" class="easyui-linkbutton">showDialog-iniframe</a>
        <a id="btn3" class="easyui-linkbutton">showDialog-href</a>
        <hr />
        <a id="btn11" class="easyui-linkbutton">showOption</a>
        <a id="btn12" class="easyui-linkbutton">showDialog</a>

    </div>

    <div data-options="region: 'east', title: 'east', split: true" style="width: 200px;"></div>
    <div data-options="region: 'north', title: 'north', split: true" style="height: 100px;"></div>
</body>
</html>

